import React from 'react'
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio, Space, Table, Tag, PaginationProps,Pagination  } from 'antd';
const columns = [
  {
    title: '角色名称',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '角色描述',
    dataIndex: 'describe',
    key: 'describe',
  },
  {
    title: '员工数',
    dataIndex: 'number',
    key: 'number',
  },
 
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>查看 </a>
       
      </Space>
    ),
  },
];
const data = [
  {
    key: '1',
    name: '高级管理员',
    describe: "所有权限",
    number: '3',
   
  },
  {
    key: '2',
    name: '客服',
    describe: "在线客服、查看订单、修改订单",
    number: '11',
   
  },
  {
    key: '3',
     name: '运营',
    describe: "营销模块、客户模块",
    number: '13',
  
  },
];
const showTotal = (total) => `Total ${total} items`;
export default function RoleManagement() {
  return (
    <div style={{backgroundColor:'#F2F2F2',height:'100%'}} >
      <h1>角色管理</h1>
       <div style={{backgroundColor:'white',height:'15%',display:'flex',alignItems:'center'}}> <Button style={{marginLeft:'1%'}} type="primary" size={'large'}>
           新建角色
      </Button ></div>
      <div><Table columns={columns} dataSource={data} pagination={false} /></div>
      <div style={{backgroundColor:'white',marginTop:'2%'}}> <Pagination
      size="small"
      total={data.length}
     
    showTotal={showTotal}
      showSizeChanger
      showQuickJumper
    /></div>
    </div>
  )
}
